<template>
    <div class="notice-board">
      <div class="board-header">
        <h2 style="margin-right: auto;color: black;">{{ title }}</h2>
        <router-link :to="moreLink">
          <h3>>>更多</h3>
        </router-link>
      </div>
      <el-skeleton v-if="loading" rows:5 animated />
      <el-scrollbar v-else height="280px">
        <ul class="notice-list">
          <li v-for="item in list" :key="item.id" @click="goToDetail(item.id)" class="notice-item">
            <span class="date">[{{ item.publishTime }}]</span>
            <span class="title">{{ item.title }}</span>
          </li>
        </ul>
      </el-scrollbar>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  const props = defineProps({
    title: {
      type: String,
      required: true
    },
    list: {
      type: Array,
      required: true
    },
    moreLink: {
      type: String,
      default: '/home/policy'
    },
    loading: {
      type: Boolean,
      default: false
    }
  })
  
  // 点击跳转到详情页
  const goToDetail = (id) => {
    //router.push(`/home/policy/detail/${id}`)
    window.open(`/home/detail/${id}`, '_blank')
  }
  </script>
  
  <style scoped>
  .notice-board {
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 16px;
    background-color: #fff;
  }
  
  .board-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .notice-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    cursor: pointer;
  }
  
  .notice-item:hover .title {
    color: #409EFF;
  }
  
  .date {
    color: #999;
    margin-right: 10px;
  }
  
  .title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
  }
  </style>
  